import { Layout, Menu, Breadcrumb, Dropdown, Form } from 'antd';
import { Link } from 'react-router-dom';
import React, { useState } from 'react';
import {
  Table,
  Radio,
  Divider,
  Space,
  Input,
  DatePicker,
  Select,
  Button,
  Tabs,
  message,
  Modal,
} from 'antd';
import ReactDOM from 'react-dom';
import request from '@/http';
import { history } from '@/.umi/core/history';
import All_style from '../../index.less';
import style from './index.less';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;

interface DataType {
  key: React.Key;
  collegeName: string;
  majorName: number;
  gradeName: string;
  className: string;
  teacherName: string;
  classEnd: string;
  studentTotal: string;
  active: string;
}
const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows,
    );
  },
  // getCheckboxProps: (record: DataType) => ({
  //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
  //   name: record.name,
  // }),
};
const studentManager = (props: any) => {
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>(
    'checkbox',
  );
  const columns = [
    {
      title: '院系',
      dataIndex: 'collegesName',
      key: 'collegesName',
    },
    {
      title: '专业',
      dataIndex: 'majorName',
      key: 'majorName',
    },
    {
      title: '年级',
      dataIndex: 'yearName',
      key: 'yearName',
    },
    {
      title: '班级',
      dataIndex: 'className',
      key: 'className',
    },
    {
      title: '班主任',
      dataIndex: 'teacherName',
      key: 'teacherName',
    },
    {
      title: '是否已结业',
      dataIndex: 'isGraduation',
      key: 'isGraduation',
      render: (text: any, row: any) => {
        return row.isGraduation == '0'
          ? '是'
          : row.isGraduation == '1'
          ? '否'
          : '';
      },
    },

    {
      title: '学员总数',
      dataIndex: 'sum',
      key: 'sum',
    },
    {
      title: '操作',
      key: 'active',
      render: (row: any) => {
        return row.id ? (
          <>
            <Button
              type="link"
              onClick={() => {
                history.push({
                  pathname: '/Admin/studentManager/Allstudents',
                  state: { row: row },
                });
              }}
            >
              学员明细
            </Button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <Button
              type="link"
              onClick={() => {
                showModal1(row);
              }}
            >
              编辑
            </Button>
          </>
        ) : (
          ''
        );
      },
    },
  ];

  /**
   * 获得下拉框数据
   */
  const [college, setCollege] = React.useState([]);
  const getCollege = async () => {
    const College: any = await request.get('/common/getColleges');
    if (College.code == '200') {
      setCollege(College.date);
    } else {
      message.error(College.message); //弹出错误信息
    }
  };
  const [major, setMajor] = React.useState([]);
  const getMajor = async () => {
    const Major: any = await request.get('/common/getMajor');
    if (Major.code == '200') {
      setMajor(Major.date);
    } else {
      message.error(Major.message); //弹出错误信息
    }
  };
  const [grade, setGrade] = React.useState([]);
  const getGrade = async () => {
    const Grade: any = await request.get('/common/getYear');
    if (Grade.code == '200') {
      setGrade(Grade.date);
    } else {
      message.error(Grade.message); //弹出错误信息
    }
  };
  const [className, setClassName] = React.useState([]);
  const getClass = async () => {
    const className: any = await request.get('/common/getClassBase');
    if (className.code == '200') {
      setClassName(className.date);
    } else {
      message.error(className.message); //弹出错误信息
    }
  };
  const [teacher, setTeacher] = React.useState([]);
  const getTeacher = async () => {
    const teacher: any = await request.get('/common/getTeacher');
    if (teacher.code == '200') {
      setTeacher(teacher.date);
    } else {
      message.error(teacher.message); //弹出错误信息
    }
  };

  //弹框(新增学生)
  const [visible, setVisible] = React.useState<any>();
  const [addClass] = Form.useForm(); //获取新增学生的表单对象
  const showModal = () => {
    setVisible(true);
    addClass.setFieldsValue(null);
  };
  const modelOnOk = async () => {
    const datas = await addClass.validateFields();
    const result: any = await request.post('/class/addClass', {
      ...datas,
      role: 1,
    });
    if (result.code == '200') {
      message.success(result.message);
      loadData(null, 1, pagination.pageSize).finally();
    } else {
      message.error(result.message); //弹出错误信息
      loadData(null, 1, pagination.pageSize).finally();
    }
    setVisible(false);
  };
  const modelOnCancel = () => {
    setVisible(false);
  };

  //弹框（编辑）
  const [visible1, setVisible1] = React.useState<any>();
  const [changeClass] = Form.useForm(); //获取编辑学生的表单对象
  const [change, setChange] = React.useState({
    className: '',
    collegesName: '',
    id: '',
    isGraduation: '',
    majorName: '',
    sum: '',
    teacherName: '',
    yearName: '',
  });
  const showModal1 = (row: any) => {
    console.log(row);
    setChange(row);
    setVisible1(true);
    changeClass.setFieldsValue(row);
  };
  const modelOnOk1 = async () => {
    const datas = await changeClass.validateFields();
    const result: any = await request.post('/class/updateClass', {
      ...datas,
      id: change.id,
    });
    console.log(result.code);
    if (result.code == '200') {
      message.success(result.message);
      loadData(null, 1, pagination.pageSize);
    } else {
      message.error(result.message); //弹出错误信息
      loadData(null, 1, pagination.pageSize).finally();
    }
    setVisible1(false);
  };
  const modelOnCancel1 = () => {
    setVisible1(false);
  };

  const [formObject] = Form.useForm(); //获取表单对象
  //分页
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });
  const pageOnChange = async (page: any) => {
    await loadData(formObject.getFieldsValue(), page.current, page.pageSize);
  };
  /*........................................................ */

  //数据展示及条件查询
  const [data, setData] = React.useState();
  const loadData = async (
    queryParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const datas = await formObject.validateFields();
    const result: any = await request.post('/class/selectClass', {
      ...datas,
      ...queryParams,
      page: pageValue,
      number: pageSizeValue,
    });

    if (result.code == '200') {
      const newData = result.date.returnDate.map((d: any, index: any) => {
        return {
          key: `k_${index}`,
          ...d,
        };
      });
      setPagination({
        ...pagination,
        current: pageValue,
        pageSize: pageSizeValue,
        total: result.totalCount,
      });
      setData(newData);
    } else {
      message.error(result.message); //弹出错误信息
    }
  };

  //重置
  const onReset = () => {
    formObject.resetFields();
    loadData(null, 1, pagination.pageSize);
  };
  React.useEffect(() => {
    loadData(null, 1, pagination.pageSize).finally();
    getCollege();
    getMajor();
    getGrade();
    getClass();
    getTeacher();
  }, []);

  return (
    <div className={style.box}>
      <Form name="selectForm" form={formObject} preserve={false}>
        <div>
          <div style={{ clear: 'both' }}>
            <Form.Item
              name="collegesId"
              label="院&nbsp;&nbsp;&nbsp;&nbsp;系："
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {college.map((c: any, index: any) => {
                  return (
                    <Option key={`k_${index}`} value={c.id}>
                      {c.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>

            <Form.Item
              name="majorId"
              label="专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业："
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Select placeholder="请选择">
                {major.map((c: any, index: any) => {
                  return (
                    <Option key={`k_${index}`} value={c.id}>
                      {c.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>

            <Form.Item
              name="yearInfoId"
              label="年级："
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {grade.map((c: any, index: any) => {
                  return (
                    <Option key={`k_${index}`} value={c.id}>
                      {c.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>

            <Form.Item
              name="classBaseInfoId"
              label="班级："
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {className.map((c: any, index: any) => {
                  return (
                    <Option key={`k_${index}`} value={c.id}>
                      {c.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ clear: 'both' }}>
            <Form.Item
              name="teacherName"
              label="班主任："
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Input placeholder="精准匹配" className={All_style.select} />
            </Form.Item>

            <Form.Item
              name="isGraduation"
              label="是否结业："
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Select placeholder="请选择" className={All_style.select}>
                <Option value="0">是</Option>
                <Option value="1">否</Option>
              </Select>
            </Form.Item>
          </div>

          <Button
            className={All_style.button}
            style={{ marginLeft: 30 }}
            onClick={() => {
              loadData(null, 1, pagination.pageSize).finally();
            }}
          >
            查询
          </Button>
          <Button className={All_style.button2} onClick={onReset}>
            重置
          </Button>
        </div>
      </Form>

      <div style={{ clear: 'both' }}>
        <Button type="primary" onClick={showModal} className={All_style.button}>
          +新增班级
        </Button>
        <Modal
          title="新增班级"
          width={1250}
          visible={visible}
          onOk={modelOnOk}
          onCancel={modelOnCancel}
          maskClosable={false} //清除弹框内容
          okText="确认"
          cancelText="取消"
        >
          <Form name="AddClassForm" form={addClass} preserve={false}>
            <div style={{ clear: 'both' }}>
              <Form.Item
                name="collegesId"
                label="院系："
                className={All_style.formItem}
                rules={[
                  { required: true, whitespace: true, message: '请选择院系!' },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  {college.map((c: any, index: any) => {
                    return (
                      <Option key={`k_${index}`} value={c.id}>
                        {c.format}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
              <Form.Item
                name="majorId"
                label="专&nbsp;&nbsp;&nbsp;&nbsp;业"
                className={All_style.formItem}
                rules={[
                  { required: true, whitespace: true, message: '请选择专业!' },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  {major.map((c: any, index: any) => {
                    return (
                      <Option key={`k_${index}`} value={c.id}>
                        {c.format}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>

              <Form.Item
                name="yearInfoId"
                label="年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级"
                className={All_style.formItem}
                rules={[
                  { required: true, whitespace: true, message: '请选择年级!' },
                ]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  {grade.map((c: any, index) => {
                    return (
                      <Option key={`k_${index}`} value={c.id}>
                        {c.format}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>
            <div style={{ clear: 'both' }}>
              <Form.Item
                name="classBaseInfoId"
                label="班级"
                className={All_style.formItem}
                rules={[{ required: true, message: '请选择性别!' }]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  {className.map((c: any, index) => {
                    return (
                      <Option key={`k_${index}`} value={c.id}>
                        {c.format}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
              <Form.Item
                name="teacherId"
                label="班主任"
                className={All_style.formItem}
                rules={[{ required: true, message: '请选择班主任!' }]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  {teacher.map((c: any, index) => {
                    return (
                      <Option key={`k_${index}`} value={c.id}>
                        {c.format}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
              <Form.Item
                name="isGraduation"
                label="是否已结业"
                className={All_style.formItem}
                rules={[{ required: true, message: '请选择是否已结业!' }]}
                style={{ float: 'left', marginLeft: 30 }}
              >
                <Select>
                  <option value={'0'}>是</option>
                  <option value={'1'}>否</option>
                </Select>
              </Form.Item>
            </div>
            <div style={{ clear: 'both' }}></div>
          </Form>
        </Modal>
        {/* 编辑弹框 */}
        <Modal
          title="编辑"
          width={1000}
          visible={visible1}
          onOk={modelOnOk1}
          maskClosable={true}
          destroyOnClose={true}
          onCancel={modelOnCancel1}
          okText="确认"
          cancelText="取消"
        >
          <Form
            name="AddClassForm"
            form={changeClass}
            preserve={false} //在 Modal 关闭时销毁表单字段数据
            initialValues={change}
          >
            <Form.Item
              name="collegesId"
              label="院系："
              rules={[
                { required: true, whitespace: true, message: '请选择院系!' },
              ]}
              style={{ marginBottom: 24 }}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {college.map((c: any, index: any) => {
                  return (
                    <Option key={`k_${index}`} value={c.id}>
                      {c.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item
              name="majorId"
              label="专业"
              rules={[
                { required: true, whitespace: true, message: '请选择专业!' },
              ]}
              style={{ marginBottom: 24 }}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {major.map((c: any, index: any) => {
                  return (
                    <Option key={`k_${index}`} value={c.id}>
                      {c.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>

            <Form.Item
              name="yearInfoId"
              label="年级"
              rules={[
                { required: true, whitespace: true, message: '请选择年级!' },
              ]}
              style={{ marginBottom: 24 }}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {grade.map((c: any, index) => {
                  return (
                    <Option key={`k_${index}`} value={c.id}>
                      {c.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item
              name="classBaseInfoId"
              label="班级"
              className={All_style.formItem}
              rules={[{ required: true, message: '请选择性别!' }]}
              style={{ marginBottom: 24 }}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {className.map((c: any, index) => {
                  return (
                    <Option key={`k_${index}`} value={c.id}>
                      {c.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item
              name="teacherId"
              label="班主任"
              rules={[{ required: true, message: '请选择班主任!' }]}
              style={{ marginBottom: 24 }}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {teacher.map((c: any, index) => {
                  return (
                    <Option key={`k_${index}`} value={c.id}>
                      {c.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item
              name="isGraduation"
              label="是否已结业"
              rules={[{ required: true, message: '请选择是否已结业!' }]}
              style={{ marginBottom: 24 }}
            >
              <Select>
                <option value={'0'}>是</option>
                <option value={'1'}>否</option>
              </Select>
            </Form.Item>
          </Form>
        </Modal>

        <Radio.Group
          onChange={({ target: { value } }) => {
            setSelectionType(value);
          }}
          value={selectionType}
        ></Radio.Group>

        <Table
          columns={columns}
          dataSource={data}
          className={style.table}
          pagination={pagination}
          onChange={pageOnChange}
          tableLayout="fixed"
          bordered
        />
      </div>
    </div>
  );
};

export default studentManager;
